<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css">
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <title>用户管理</title>
</head>

<body>
<div class="page-content" >
    <!--用户管理-->
    <div class="user_Manager_style">

        <div class="Manager_style add_user_info">
            <div class="title_name">添加用户</div>
            <button class="btn btn-primary" type="button" id="Add_user_btn">添加用户</button>

            <div id="Add_user_style" style="display:none">
                <form method="post" action="test.do" id="userForm" onsubmit="return validateForm()">
                    <div class="add_user_style clearfix">
                        <!--    <div class="reset_style"><input name="reset" type="reset" value="重置" /class="btn btn-warning"> </div>-->
                        <ul class="clearfix">
                            <li><label class="label_name">登录用户名</label> <input name="username" type="text"  class="" id="name"/><i style="color:#F60; ">*</i></li>
                            <li><label class="label_name">登录密码</label><input name="password" type="password"  class="" id="password"/><i style="color:#F60; ">*</i></li>
                            <li><label class="label_name">用户角色</label>
                                <select name="rname" size="1" id="select_Roles" class="">
                                    <option selected value="">--请选择--</option>
                                    <option value="管理员" >管理员</option>
                                    <option value="询价员">询价员</option>
                                    <option value="船名">船名</option>
                                </select>
                                <i style="color:#F60; ">*</i>
                            </li>
                            <li><label class="label_name">手机号</label><input name="tel" type="text"  class="" id="phone"/><i style="color:#F60; ">*</i></li>
                            <li><label class="label_name">用户姓名</label><input name="name" type="text"  class="" id="user_name"/><i style="color:#F60; ">*</i></li>
                            <li><label class="label_name">用户状态</label>
                                <select name="state" size="1" id="select_status">
                                    <option selected value="">--请选择--</option>
                                    <option value="启用">启用</option>
                                    <option value="停用">停用</option>
                                </select>
                                <i style="color:#F60; ">*</i>
                            </li>
                            <li><label class="label_name">用户性质</label>
                                <div class="radio"><label><input name="type" type="radio" class="ace" VALUE="油船" onclick="hide1()"/><span class="lbl">油船</span></label></div>
                                <div class="radio"><label><input name="type" type="radio" class="ace" VALUE="供应商" onclick="display1()"/><span class="lbl">供应商</span></label></div>
                            </li>
                            <li id="ycxz" style="display:none"><label class="label_name">油船选择</label>
                                <select name="sname" size="1" id="yc_name">
                                    <option selected value="">--请选择--</option>
                                    <option value="长江号">长江号</option>
                                    <option value="南京号">南京号</option>
                                    <option value="飞天虎号">飞天虎号</option>
                                </select></li>
                            <li id="gys_name" style="display:none"><label class="label_name">供应商名称</label>
                                <select name="sname" size="1" id="gys_name">
                                    <option selected value="">--请选择--</option>
                                    <option value="公司名称1">公司名称1</option>
                                    <option value="公司名称">公司名称</option>
                                    <option value="公司名称">公司名称</option>
                                </select></li>
                        </ul>
                        <div id="hao"></div>
                        <div class="Remark"><label class="label_name">备注</label><textarea name="text" cols="" rows="" style=" width:700px; height:100px; padding:5px;"></textarea></div>
                        <div style="text-align: center;">
                            <input type="submit" value="添加" style="display: inline-block;"class="btn btn-primary">
                        </div>
                    </div><!--onclick="return checkNull()"-->
                </form>
            </div>
        </div>




        <div class="Manager_style">
            <div class="title_name">用户列表</div>
            <div class="Role_list" id="app">
                <table id="Role_list" cellpadding="0" cellspacing="0" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th width="60">序列号</th><th>用户名</th>
                        <th width="5%">角色名称</th><th>用户姓名</th>
                        <th>用户状态</th><th>用户性质</th>
                        <th>手机号</th><th>所属名称</th>
                        <th width="20%">备注</th><th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="u in User">
                        <td width="60">{{u.id}}</td>
                        <td>{{u.uname}}</td>
                        <td width="5%">{{u.rname}}</td>
                        <td>{{u.name}}</td>
                        <td>{{u.state}}</td>
                        <td>{{u.type}}</td>
                        <td>{{u.tel}}</td>
                        <td>{{u.sname}}</td>
                        <td >{{u.text}}</td>
                        <td class="User_Action_btn">
                            <button  type="button" class="btn btn-primary " onclick="window.location.href = '1用户修改.html'">修改</button>
                            <button  type="button" class="btn btn-warning" @click="d(u.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
    if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/layer/layer.js"></script>
<script type="text/javascript">

    function hide1(){
        document.getElementById('ycxz').style.display='';
        document.getElementById('gys_name').style.display='none';

    }
    function display1(){
        document.getElementById('ycxz').style.display='none';
        document.getElementById('gys_name').style.display='';
    }
    /***判断用户添加文本**/
    $('#Add_user_btn').on('click', function(){
        layer.open({
            type: 1,
            title: '添加用户',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['860px' , '400px'],
            content:$('#Add_user_style'),
            btn: [],
            yes: function(index, layero){
                if ($("#name").val()==""){
                    layer.alert('登录用户名不能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }
                if ($("#password").val()==""){
                    layer.alert('密码不能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }

                if ($("#select_Roles").val()==""){
                    layer.alert('用角色不能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }

                if ($("#phone").val()==""){
                    layer.alert('电话号码不能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }
                if ($("#user_name").val()==""){
                    layer.alert('用户名不能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }

                if ($("#select_status").val()==""){
                    layer.alert('用户状态能为空!',{
                        title: '提示框',
                        icon:0,

                    });
                    return false;
                }
                if(!$(':radio[name=check]:checked').length) {
                    layer.alert('请选择用户性质!',{
                        title: '提示框',
                        icon:0,
                    });
                    return false;

                }
                else{
                    layer.alert('添加成功！',{
                        title: '提示框',
                        icon:1,
                    });
                    layer.close(index);
                }
            } 	,
            cancel: function(index){

                layer.alert('确定退出！',{
                    title: '提示框',
                    icon:1,
                });

            }
        });
    });
    $('.reset_Password').on('click', function(){
        layer.confirm('是否重置密码，重置后原密码将失效？', {
            btn: ['重置','取消'] //按钮
        }, function(){
            layer.msg('重置成功！', {time: 1000,icon: 1});
        });

    });
</script>
<script>
    new Vue({
        el:"#app",
        data:{
            User:[]
        },
        mounted(){
            this.getUser();
        },
        methods:{
            getUser(){
                axios.get("query1.do").then(dt=>{
                    this.User = dt.data;
                })
            },
            d(id){
                axios.get("delete.do?id="+id).then(
                )
                this.getUser()
            },
        }
    })
</script>
<script>
    function validateForm() {
        // 获取表单元素
        var username = document.getElementById('name').value;
        var password = document.getElementById('password').value;
        var rname = document.getElementById('select_Roles').value;
        var tel = document.getElementById('phone').value;
        var name = document.getElementById('user_name').value;
        var state = document.getElementById('select_status').value;

        // 检查所有必填字段是否为空
        if (username === '' || password === '' || rname === '' || tel === '' || name === '' || state === '') {
            alert('请填写所有必填字段。');
            return false; // 阻止表单提交
        }

        // 可以在此处添加其他验证逻辑

        return true; // 提交表单
    }
</script>
</body>
</html>
